<template>
  <div class="dialog" v-if="isShowDialog">
    <div class="mask" :class="[isShow ? 'show': 'hide' ]"></div>

    <div v-show="displayType == 1" class="dialog-content type" :class="[isShow ? 'show': 'hide' ]">
      <div class="title c_lightheight-bg">
        {{ titleName }}
      </div>
      <template v-for='(value, index) in contents'>
        <div @click="skipToPDF(value)" :class="[index == 0 && 'text-1', value.link ? 'c_lightheight' : 'c_333' ]"
             class="text b_FS-28 font-regular ">
          {{ value.text }}
        </div>
      </template>
      <i class="close-btn" :class="[isShow ? 'show': 'hide' ]" @click='closeDialog'></i>
    </div>

    <div v-show="displayType == 2" class="dialog-vertify-content type" :class="[isShow ? 'show': 'hide' ]">
      <img src="@/assets/images/vertify.png">
      <div class="font-regular c_333 b_FS-28">
        {{ contentText }}
      </div>
      <p @click='closeDialog' class="understand c_lightheight b_FS-28">知道了</p>
    </div>
    <div v-show="displayType == 3" class="dialog-confirm type" :class="[isShow ? 'show': 'hide' ]">
      <div class="title">提示</div>
      <div class="font-regular  b_FS-30 content c_999 font-medium ">
        {{ confirmInfo.content }}
      </div>
      <div class="b_flex confirm-btn c_lightheight b_FS-28">
        <span @click="confirm">确定</span>
        <span @click="cancel"
              class="c_999">取消</span>
      </div>
      <!--<p @click='closeDialog' class="understand c_lightheight b_FS-28">知道了</p>-->
    </div>


  </div>
</template>
<script type="text/babel">
  const dialogTitles = {
    notice: "投保须知",
    appoint: "特别约定",
    rules: "保险条款"
  }
  const contents = {
    // 投保须知
    notice: [
      {text: "1、身体健康，能正常学习和生活的12周岁（含12周 岁）以下的全日制大、中、小学学生和18个月以上 （含18个月）的幼儿，均可作为本保险合同的被保险人。"},
      {text: "2、未成年学生、幼儿必须由父母或者实际监护人投保。"},
      {text: "3、如被保险人由于年龄太小仍未办理身份证，可以填写户口簿号。"}
    ],
    // 特别约定
    appoint: [
      {text: "1.只承保手足口病引起的身故和住院医疗费用；"},
      {text: "2.等待期为90天，续保者不受等待期限制；"},
      {text: "3.符合保险责任范围内的住院医疗费用，每次事故绝对免赔额100元后，按90%给付保险金。"}
    ],
    // 保险条款
    rules: [
      {text: "学生、幼儿意外伤害保险条款-人保财险（备-意外）[2013]主40号-条款", link: 'static/1.html'},
      {text: "附加学生、幼儿住院医疗保险条款-人保财险（备-健康）[2015]附10号-条款", link: 'static/3.html'},
      {text: "附加学生、幼儿疾病身故保险条款（2009版）-人保财险（备-健康）[2015]附7号-条款", link: 'static/2.html'}
    ]
  }

  export default {
    name: "Dialog",
    data() {
      return {
        isShowDialog: false,
        isShow: false,
        titleName: '',
        contents: "",
        contentText: "",
        displayType: 1,
        confirmInfo: {
          title: "提示",
          content: "",

        },
        resolve: null,
        reject: null
      }
    },
    components: {},
    mounted() {
    },
    methods: {
      closeDialog() {
        this.isShow = false
        setTimeout(() => {
          this.isShowDialog = false
        }, 500)

      },
      showDialog(
        type = 1,
        contentType = "notice",
      ) {

        this.displayType = type
        // 三个链接
        if (type === 1) {
          this.contents = contents[contentType]
          this.titleName = dialogTitles[contentType]
        }
        // 验证提示
        else if (type === 2) {
          this.contentText = contentType
        }
        else if (type === 3) {
          this.isShow = true
          this.isShowDialog = true
          this.confirmInfo = Object.assign(this.confirmInfo, contentType)
          return new Promise((resolve, reject) => {
            this.resolve = resolve
            this.reject = reject
          })
        }
        this.isShow = true
        this.isShowDialog = true
      },
      skipToPDF(item) {
        if (this.displayType == 1) {
          window.location.href = item.link
        }
        return
      },
      submit() {
        this.resolve('submit')
      },
      close(type) {
        this.show = false
        if (!this.reject) {
          this.reject(type)
        }
        this.setMaskTipShow(false)
      },
      cancel() {
        this.closeDialog()
        if (!this.reject) {
          this.reject("cancel")
        }
      },
      confirm() {
        this.closeDialog()
        this.resolve("submit")
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "~@/assets/css/global.less";

  .dialog {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: @maskDialog;
  }

  .common-postion {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 266px;
  }

  .common-dialog-config {
    .common-postion;
    z-index: @maskDialog;
    width: 500px;
    min-height: 343px;
    background-color: #fff;
    border-radius: 10px;
    &.show {
      animation: contentShow 0.5s ease-in-out;
      //animation: contentShow 0.7s ease-in-out;
    }
    &.hide {
      animation: contentHide 0.5s ease-in-out;
    }
  }

  .dialog-confirm {
    .common-dialog-config ;
    top: 40%;
    min-height: 200px;
    .title {
      .font-medium ;
      font-size: 30px;
      width: 100%;
      text-align: center;
      padding: 20px 0 0;
      .c_333 ;
      /*border-bottom: 1px solid #DEDDDB;*/
    }
    .content {
      text-align: center;
      height: 80px;
      line-height: 80px;
    }
    .confirm-btn {
      justify-content: center;
      .font-medium;
      > span {
        text-align: center;
        width: 50%;
        border-top: 1px solid #DEDDDB;
        height: 68px;
        padding: 15px;
      }
      span:nth-child(1) {
        border-right: 1px solid #DEDDDB;
      }
    }
  }

  .dialog-vertify-content {
    .common-dialog-config ;
    img {
      width: 139px;
      height: 124px;
      display: block;
      margin: auto;
      margin-top: 40px;
      margin-bottom: 25px;
    }
    > div {
      margin-bottom: 40px;
      text-align: center;
    }
    .understand {
      text-align: center;
      padding: 30px;
      border-top: 1px solid #DEDDDB;
    }
  }

  .dialog-content {
    position: relative;
    z-index: @maskDialog;
    .common-postion;
    &.show {
      animation: contentShow 0.5s ease-in-out;
      //animation: contentShow 0.7s ease-in-out;
    }
    &.hide {
      animation: contentHide 0.5s ease-in-out;
    }

    width: 690px;
    min-height: 440px;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding-left: 29px;
    padding-right: 26px;
    padding-bottom: 60px;
    .title {
      .font-medium ;
      font-size: 36px;
      width: 369px;
      padding: 11px;
      border-radius: 29px;
      color: #fff;
      text-align: center;
      margin: auto;
      margin-top: 54px;
    }
    .text {
      line-height: 45px;
      margin-top: 20px;
      &.text-1 {
        margin-top: 60px;
      }
    }

  }

  .mask {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: @maskZindex;
    background-color: rgba(0, 0, 0, .4);
    &.show {
      animation: maskShow 1s ease-in-out;
    }
    &.hide {
      animation: maskHide 1s ease-in-out;
    }

  }

  .close-btn {
    width: 60px;
    height: 60px;
    background-image: url("~@/assets/images/tc-guanbi@2x.png");
    background-size: cover;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -110px;
    &.show {
      animation: closeBtn 0.9s ease-in-out;
    }
    &.hide {
      animation: closeBtnHide 0.9s ease-in-out;
    }
  }

  @keyframes contentShow {
    0% {

      opacity: 0;
      position: absolute;
      left: 50%;
      transform: translate(-50%) scale(0.5);
      top: 266px;
    }
    100% {
      opacity: 0;
      position: absolute;
      left: 50%;
      transform: translate(-50%) scale(1);
      opacity: 1;
    }
  }

  @keyframes contentHide {
    0% {
      opacity: 0;
      position: absolute;
      left: 50%;
      transform: translate(-50%) scale(1);
      opacity: 1;
    }
    100% {
      opacity: 0;
      position: absolute;
      left: 50%;
      transform: translate(-50%) scale(0.5);
      opacity: 0;
    }
  }

  @keyframes maskShow {
    0% {
      position: fixed;
      left: 0;
      top: 0;
      opacity: 0;
    }
    100% {
      position: fixed;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, .4);
    }

  }

  @keyframes maskHide {
    0% {
      position: fixed;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, .4);
    }
    100% {
      position: fixed;
      left: 0;
      top: 0;
      opacity: 0;
    }
  }

  @keyframes closeBtn {
    0% {
      bottom: -310px;
    }

    100% {
      bottom: -110px;
    }
  }

  @keyframes closeBtnHide {
    50% {
      bottom: -310px;
      opacity: 1;
    }

    100% {
      bottom: -510px;
      opacity: 0.5;
    }
  }
</style>

